<template>
  <!-- 任务考核结果 -->
  <div>
    <div class="header">
      <el-form ref="form"  :model="form" label-width="100px">
        <el-form-item label="任务名称">
          <el-input v-model="form.name" placeholder="请输入任务名称"></el-input>
        </el-form-item>
        <el-form-item label="指标体系">
          <el-select v-model="form.system" placeholder="请选择指标体系">
            <el-option label="2022员工考核体系-非银" value="0"></el-option>
            <el-option label="2022员工考核体系-银行" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务起止日期">
           <el-date-picker
              v-model="form.date"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="btns">
        <div>
          <el-button class="btn">导出</el-button>
        </div>
        <div>
          <el-button class="btn">查询</el-button>
          <el-button class="btn">重置</el-button>
        </div>
      </div>
    </div>
    <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="任务名称" align="center">
          </el-table-column>
          <el-table-column prop="period" label="任务周期" width="80px" align="center">
          </el-table-column>
          <el-table-column prop="startDate" label="开始日期" width="120px" align="center">
          </el-table-column>
          <el-table-column prop="endDate" label="结束日期" width="140px" align="center">
          </el-table-column>
          <el-table-column prop="system" label="指标体系" width="180px" align="center">
          </el-table-column>
          <el-table-column prop="structure" label="创建结构"  width="140px" align="center">
          </el-table-column>
          <el-table-column prop="operation" label="操作" width="100px" align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="dialogFormVisible = true"
                type="text"
                size="small">
                编辑
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <div>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageFn"
      >
      </el-pagination>
    </div>
    <div class="addForm">
      <el-dialog title="考核任务信息"  :visible.sync="dialogFormVisible">
        <el-form :model="addForm" label-width="160px">
          <el-form-item label="任务名称" >
            <el-input v-model="addForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="任务周期">
            <el-select v-model="addForm.period" placeholder="请选择任务周期">
              <el-option label="年" value="0"></el-option>
              <el-option label="月" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期" >
            <el-date-picker
              v-model="addForm.startDate"
              type="date"
              placeholder="选择开始日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="addForm.startDate"
              type="date"
              placeholder="选择结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="指标体系">
            <el-input v-model="addForm.system" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建结构">
            <el-input v-model="addForm.structure" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="btn" @click="dialogFormVisible = false">取 消</el-button>
          <el-button class="btn" type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      form:{
        name:'',
        system:'',
        period:'',
      },
       total: 0,
      tableData:[
        {
          index:'1',
          name:'2022员工考核体系-非银',
          period:'年',
          startDate:'2022-01-01',
          endDate:'2022-12-31',
          system:'2022员工考核体系',
          structure:'金融银行同业部',
        },
        {
          index:'2',
         name:'2022员工考核体系-非银',
          period:'年',
          startDate:'2022-01-01',
          endDate:'2022-12-31',
          system:'2022员工考核体系',
          structure:'金融银行同业部',
        },
        {
          index:'3',
          name:'2022员工考核体系-非银',
          period:'年',
          startDate:'2022-01-01',
          endDate:'2022-12-31',
          system:'2022员工考核体系',
          structure:'金融银行同业部',
        },
        {
          index:'4',
          name:'2022员工考核体系-非银',
          period:'年',
          startDate:'2022-01-01',
          endDate:'2022-12-31',
          system:'2022员工考核体系',
          structure:'金融银行同业部',
        },
        
      ],
      dialogFormVisible:false,
      addForm:{
        name:'',
        period:'',
        startDate:'',
        endDate:'',
        system:'',
        structure:'',
      }
    }
  },
  methods:{
    addInfo(){
      this.dialogFormVisible = true
    },
    pageFn(){
      //
    }
  }

}
</script>

<style lang="scss" scoped>
  .header {
    background: #262d47;
    padding: 10px;
  }
  .table {
    background: #262d47;
    padding: 10px;
    margin-top: 10px;
  }
  .btns {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  ::v-deep {
    .header {
      .el-form {
        display: flex;
      }
    }
    .addForm {
      .el-form .el-form-item .el-form-item__content .el-input__inner.el-input__inner{
        width: 300px;
      }
    }
    .el-table {
      min-height: 440px;
      background-color: #262d47;
    }
    .el-table th.el-table__cell {
      background-color: #1c2238 ;
      color: #fff ;
    }
    .el-pagination {
      text-align: right;
    }
  }
</style>